<template>
  <div v-show="true" class="mainToolBar">
    <!-- <div id="xzqNav" style="width: 100px" @click="clickNav(0)">
      <Icon
        v-if="!isClick[0]"
        class="icon-init"
        size="19"
        color="white"
        type="md-pin"
      />&nbsp;
      <Icon v-else type="md-pin" size="19" color="rgb(13, 242, 201)" />&nbsp;
      <span v-if="!isClick[0]" class="content_Tobar">区划导航</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >区划导航</span
      >
    </div> -->
    <div id="trailRoute" style="width: 100px" @click="clicktrailRoute(1)">
      <Icon v-if="!isClick[1]" color="white" size="19" type="ios-pulse" />&nbsp;
      <Icon v-else type="ios-pulse" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[1]" class="content_Tobar">轨迹线路</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >轨迹线路</span
      >
    </div>
    <Divider type="vertical" class="fenge-line" />
    <div id="trailPoint" style="width: 100px" @click="clicktrailPoint(2)">
      <Icon v-if="!isClick[2]" color="white" size="19" type="md-pin" />&nbsp;
      <Icon v-else type="md-pin" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[2]" class="content_Tobar">轨迹点位</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >轨迹点位</span
      >
    </div>
    <Divider type="vertical" class="fenge-line" />
    <div id="trailHotMap" style="width: 120px" @click="clicktrailHotMap(3)">
      <Icon v-if="!isClick[3]" color="white" size="19" type="md-map" />&nbsp;
      <Icon v-else type="md-map" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[3]" class="content_Tobar">轨迹热力图</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >轨迹热力图</span
      >
    </div>
    <Divider type="vertical" class="fenge-line" />
    <div id="controlExtend" style="width: 100px" @click="clickcontrolExtend(3)">
      <Icon v-if="!isClick[4]" color="white" size="19" type="md-exit" />&nbsp;
      <Icon v-else type="md-exit" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[4]" class="content_Tobar">管控区域</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >管控区域</span
      >
    </div>
    <!-- <div id="clearAll" style="width: 70px" @click="clickClear(1)">
      <Icon type="ios-trash" size="19" color="white" />&nbsp;
      <span class="content_Tobar">清除</span>
    </div> -->
    <Divider type="vertical" class="fenge-line" />
    <div id="allWindow" style="width: 70px" @click="clickAllWindow(2)">
      <Icon v-if="!isFull" color="white" type="md-qr-scanner" size="19" />&nbsp;
      <Icon
        v-else
        type="md-qr-scanner"
        color="rgb(13, 242, 201)"
        size="19"
      />&nbsp;
      <span v-if="!isFull" class="content_Tobar">全屏</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >全屏</span
      >
    </div>
    <!-- <Divider type="vertical" class="fenge-line" /> -->
    <!-- <div id="searchAim" style="width: 70px" @click="clickSearchAim(3)">
      <Icon v-if="!isClick[3]" color="white" size="19" type="md-search" />&nbsp;
      <Icon v-else type="md-search" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[3]" class="content_Tobar">查看</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >查看</span
      >
    </div>
    <Divider type="vertical" class="fenge-line" /> -->
    <!-- <div id="lengend" style="width: 70px" @click="clickLengend(4)">
      <Icon
        v-if="!isClick[4]"
        color="white"
        size="19"
        type="md-information-circle"
      />&nbsp;
      <Icon
        v-else
        type="md-information-circle"
        size="19"
        color="rgb(13, 242, 201)"
      />&nbsp;
      <span v-if="!isClick[4]" class="content_Tobar">图例</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >图例</span
      >
    </div> -->
    <!-- <Divider type="vertical" class="fenge-line" />
    <div id="fenping" style="width: 100px" @click="clickFenping(5)">
      <Icon type="md-grid" color="white" size="19" />&nbsp;
      <span class="content_Tobar">分屏对比</span>
    </div> -->
    <!-- <Divider type="vertical" class="fenge-line" />
    <div id="commonAnalyst" style="width: 100px" @click="clickTool(7)">
      <Icon v-if="!isClick[7]" color="white" size="19" type="ios-build" />&nbsp;
      <Icon v-else type="ios-build" color="rgb(13, 242, 201)" size="19" />&nbsp;
      <span v-if="!isClick[7]" class="content_Tobar">常规分析</span>
      <span v-else class="content_Tobar" style="color: rgb(13, 242, 201)"
        >常规分析</span
      >
    </div> -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import Draw from "@arcgis/core/views/draw/Draw";
import Screenfull from "screenfull";
import eventBus from "@/bus";
export default {
  name: "toolBar",
  data() {
    return {
      isClick: [],
      isEnter: [],
      isFull: false,
      status: [],
    };
  },
  computed: {
    ...mapState("oneMap", [
      "isLegendShow",
      "view",
      "isShowXzq",
      "isShowAnalystTool",
    ]),
  },
  mounted() {
    const self = this;
    eventBus.$on("modifyCheckTool", function () {
      self.clickTool(7);
    });

    self.init();
    self.isFull = this.checkFull();
  },
  watch: {
    isFull: {
      handler() {
        let that = this;
        window.onresize = function () {
          if (that.checkFull() == false) {
            that.isFull = false;
            // that.changeSrc(2);
          } else {
            that.isFull = true;
            // that.changeSrc(2);
          }
        };
      },
      immediate: true,
    },
  },
  methods: {
    ...mapActions("oneMap", ["updateXzqState", "updateAnalystToolState"]),
    init() {
      // console.log(this.isLegendShow);
      for (let i = 0; i < 7; i++) {
        this.isClick.push(false);
        this.isEnter.push(false);
        this.status.push(false);
      }
    },
    clicktrailRoute(index){
      this.isClick.splice(index, 1, !this.isClick[index]);
      if(this.isClick[index]){
        this.$commonLayers.trailLayer.visible = true
      } else {
        this.$commonLayers.trailLayer.visible = false
      }
    },
    clicktrailPoint(index){
      this.isClick.splice(index, 1, !this.isClick[index]);
      if(this.isClick[index]){
        this.$commonLayers.trailPointLayer.visible = true
      } else {
        this.$commonLayers.trailPointLayer.visible = false
      }
    },
    clicktrailHotMap(index){
      this.isClick.splice(index, 1, !this.isClick[index]);
      if(this.isClick[index]){
        this.$commonLayers.trailPointHotLayer.visible = true
      } else {
        this.$commonLayers.trailPointHotLayer.visible = false
      }
    },
    clickcontrolExtend(index){
      this.isClick.splice(index, 1, !this.isClick[index]);
    },
    clickNav(index) {
      this.isClick.splice(index, 1, !this.isClick[index]);
      this.updateXzqState(this.isClick[index]);
    },
    clickTool(index) {
      this.isClick.splice(index, 1, !this.isClick[index]);
      this.updateAnalystToolState(this.isClick[index]);
    },
    clickClear() {
      this.view.graphics.removeAll();
      this.view.popup.close();
    },
    clickAllWindow() {
      Screenfull.toggle();
      this.isFull = this.checkFull();
    },
    checkFull() {
      let tempFull =
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      if (tempFull === undefined) {
        return false;
      }
      return true;
    },
    clickSearchAim(index) {
      this.isClick.splice(index, 1, !this.isClick[index]);
      this.view.popup.autoOpenEnabled = this.isClick[index];
    },
    clickLengend(index) {
      // let temp = this.$store.oneMap.state.isLegendShow;
      if (this.isLegendShow == false) {
        this.isClick.splice(index, 1, true);
        this.$store.dispatch("oneMap/updateLegendState", this.isClick[index]);
        // this.updateLegendState(this.isClick[index]);
      } else {
        this.isClick.splice(index, 1, false);
        this.$store.dispatch("oneMap/updateLegendState", this.isClick[index]);
        // this.updateLegendState(this.isClick[index]);
      }
    },
    clickFenping(index) {
      this.isClick.splice(index, 1, false);
      this.isEnter.splice(index, 1, false);
      this.$router.push("/fenping");
    }
  },
};
</script>
<style scoped>
.fenge-line {
  background: #7a9698;
}
.mainToolBar {
  width: 560px;
  height: 45px;
  position: fixed;
  display: flex;
  align-items: center;
  padding: 0 12px;
  top: 15px;
  right: 10px;
  background: rgb(2, 64, 85);
  box-shadow: 0px 1px 6px 0px rgba(65, 65, 65, 0.34);
  border-radius: 4px;
  cursor: pointer;
}
.content_Tobar {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgb(242, 245, 246);
  line-height: 45px;
  display: inline-block;
}
#xzqNav,
#clearAll,
#trailRoute,
#trailPoint,
#trailHotMap,
#controlExtend,
#allWindow,
#searchAim,
#lengend,
#fenping,
#commonAnalyst {
  float: left;
  height: 100%;
  text-align: center;
}
#xzqNav:hover,
#clearAll:hover,
#trailRoute:hover,
#trailPoint:hover,
#trailHotMap:hover,
#controlExtend:hover,
#allWindow:hover,
#searchAim:hover,
#lengend:hover,
#fenping:hover,
#commonAnalyst:hover {
  background-color: rgb(10, 107, 139);
}
</style>
